<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>在线IDE - 洛谷</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="css/amazeui.min.css"/>
    <link rel="stylesheet" href="css/luogu3.css">
    <link rel="stylesheet" href="css/highlight_tomorrow.css">
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/luogu3_pre.js"></script>
    <script src="js/jbase64.js"></script>
    <style>

        html, body{ margin:0; height:100%; }
        .am-topbar{
            margin-bottom: 0;
        }
        .lg-ide-buttom{
            bottom: 0;
            height: 150px;
            background-color: #ddd;
            position:absolute;
            width: 100%;
        }
        #lg-ide-main{
            height: 100%;
        }
        #lg-ide-body{
            bottom: 150px;
            top: 50px;
            position:absolute;
            width: 100%;
        }

        .lg-ide-buttom textarea{

        }
        .lg-ide-pre{
            height: 100%;
            padding: 0;
            margin: 0;

        }
        .lg-ide-buttom-title{
            height: 30px;
            background-color: #ddd;
            color: #666;
            padding: 5px;
            font-size: 14px;
            line-height: 18px;
        }
        .lg-ide-buttom-title .lg-ide-buttom-tt{
            background: #fff;
            padding: 4px 10px 4px 10px;
            border-top: thick #666666;
        }
        .lg-ide-buttom-pre{
            height: 120px;
        }




        /*自定义*/
        .ace_active-line{   /* 当前行高亮 */
            background: rgb(45,45,45) !important;
            opacity: 0.5 !important;
        }
        .ace_cursor{    /* 文本指针 */
            color: rgb(176,186,192) !important;
        }
        .ace_keyword.ace_operator{  /* 运算符 */
            color: rgb(141,163,189) !important;
        }
        .ace_punctuation.ace_operator{  /* C++的运算符 */
            color: rgb(141,163,189) !important;
        }
        .ace_keyword{   /* 关键字 */
            color: rgb(170,113,70) !important;
        }
        .ace_keyword.ace_control{   /* 关键字2 */
            color: rgb(170,108,196) !important
        }
        .ace_constant.ace_other{    /* 宏定义什么乱七八糟的 */
            color: rgb(155,182,200) !important;
        }
        .ace_storage.ace_type{  /* 数据类型 */
            color: rgb(188,128,76) !important;
        }
        .ace_identifier{    /* 标识符 */
            color: rgb(141,163,189) !important;
        }
        .ace_paren{ /* 括号 */
            color: rgb(141,163,189) !important;
        }
        .ace_string{   /* 字符串 */
            color: rgb(106,146,115) !important;
        }
        .ace_constant.ace_numeric{ /* 数字 */
            color: rgb(106,149,180) !important;
        }
        .ace_other{ /* 其它 */
            color: rgb(141,163,189) !important;
        }


        .ace_layer.ace_text-layer{
            font-family:
                    Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace !important;
        }

    </style>
</head>
<body class="">

<div id="lg-ide-main">
    <header class="am-topbar">
        <h1 class="am-topbar-brand">
            <a href="#">Luogu IDE</a>
        </h1>
        <button class="am-topbar-btn am-btn am-btn-sm am-btn-success am-topbar-toggle am-hide" data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

        <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
            <ul class="am-nav am-nav-pills am-topbar-nav">
                <li class="am-active"><a href="#">代码</a></li>
                <li><a href="#"><span class="am-badge am-radius lg-bg-red">美国的Wallace</a></li>
            </ul>

            <div class="am-topbar-right " style="padding: 10px">
                                <select data-am-selected="{btnStyle: 'secondary',btnSize: 'sm'}" name="lang">
                    <option value="2">C++</option>
                    <option value="1">C</option>
                    <option value="0">Pascal</option>
                </select>

                <button class="am-btn am-btn-success am-btn-sm " name="run">
                    <i class="am-icon-play-circle"></i> 运行(F9)
                </button>
            </div>
        </div>
    </header>


    <div id="lg-ide-body">
        <pre name="code" id="code" class="lg-ide-pre"></pre>

    </div>

    <div class="lg-ide-buttom am-g am-g-collapse">
        <div class="am-u-sm-12 lg-ide-buttom-title">
            <div class="am-g">
                <div class="am-u-sm-6">
                    <span class="lg-ide-buttom-tt"><strong>输入数据</strong></span>
                </div>
                <div class="am-u-sm-6">
                    <span class="lg-ide-buttom-tt"><strong>输出</strong>
                        <span name="label">
                        </span>
                    </span>

                </div>
            </div>
        </div>
        <div class="am-u-sm-6 lg-ide-buttom-pre">
            <pre name="sin" id="sin" class="lg-ide-pre"></pre>
        </div>
        <div class="am-u-sm-6 lg-ide-buttom-pre">
            <pre name="sout" id="sout" class="lg-ide-pre"></pre>
        </div>
    </div>
</div>

<script src="js/ace/ace.js"></script>
<script src="js/amazeui.min.js"></script>
<script>

    var editor = ace.edit("code");
    editor.setTheme("ace/theme/clouds");

    editor.session.setMode("ace/mode/c_cpp");
    editor.setFontSize(22);

    var sin = ace.edit("sin");
    sin.setTheme("ace/theme/clouds");


    var sout = ace.edit("sout");
    sout.setTheme("ace/theme/clouds");



    function to_run() {
        var code,lang,input;
        code=editor.getValue();
        lang=$("[name=lang]").val();
        input=sin.getValue();
        //alert(code+lang+input);

        storage.setItem('lg-ide-lang', lang);
        storage.setItem('lg-ide-code', code);

        $('[name=run]').addClass("am-disable")
            .html('<i class="am-icon-spinner am-icon-pulse"></i> 运行中...');

        $.post("http://www.luogu.org/app/ajax_ide_run",
            {code:code,lang:lang,input:input},
            function(data){
                $('[name=run]').removeClass("am-disable")
                    .html('<i class="am-icon-play-circle"></i> 运行(F9)');
                var label='';
                var arr=eval('('+data+')');
                if(arr['code']==403){
                    label=arr['message'];
                }
                else{
                    switch (arr['more']['status']){
                        case "Compile Error":
                            sout.setValue(arr['more']["compile_info"]);
                            label='<span class="am-badge am-badge-warning am-radius">编译失败</span>';
                            break;
                        case "Success":
                            sout.setValue(arr['more']["output"]);
                            label='<span class="am-badge am-badge-success am-radius">运行成功</span> '
                                + '耗时 '+arr['more']["time"]+'ms 内存'+arr['more']["memory"]+'kb';
                            break;
                        case "Time Limit Exceeded":
                            sout.setValue('');
                            label='<span class="am-badge lg-bg-bluedark am-radius">超过时间限制</span> ';
                            break;
                        case "Memory Limit Exceeded":
                            sout.setValue('');
                            label='<span class="am-badge lg-bg-bluedark am-radius">超出内存限制</span> ';
                            break;
                        case "Output Limit Exceeded":
                            sout.setValue('');
                            label='<span class="am-badge lg-bg-bluedark am-radius">超出输出限制</span> ';
                            break;   
                        case "Runtime Error":
                            label='<span class="am-badge lg-bg-purple am-radius">运行时错误</span> '
                            + arr['more']["signal"];
                            sout.setValue('');
                            break;
                        case "Security Violation":
                            label='<span class="am-badge lg-bg-purple am-radius">不安全代码</span> ';
                            sout.setValue('');
                            break;
                        default:
                            label='<span class="am-badge lg-bg-black am-radius">出现未知错误</span> ';
                            sout.setValue('');
                            break;
                    }
                }
                $('[name=label]').html(label);
            });
    }

    $('[name=run]').click(function () {
        to_run();
    });
    $(document).keydown(function(event){
        if(event.keyCode==120)
            to_run();
    });

</script>

<script>
    //自定义
    $(document).ready(function(){

        var el=$('.ace_scroller');
        el.css({
            background:'rgba(1,1,1,0.5)',
            zIndex:2
        });

        var img=document.createElement('img');
        img.id='bg_img';
        img.src='img/bg2.jpg';
        img.style.top=el.offset().top+'px';
        img.style.left=el.offset().left+'px';
        img.style.position='fixed';
        img.style.zIndex=1;
        img.style.width=el.width()+'px';
        img.style.height=el.height()+'px';
        img.style.opacity='0.5';
        document.body.appendChild(img);

        $(window).resize(function(){
            var el=$('.ace_scroller');
            $('#bg_img').css({
                top:el.offset().top+'px',
                left:el.offset().left+'px',
                width:el.width()+'px',
                height:el.height()+'px'
            });
        });

        var storage = window.localStorage;
        if(storage.getItem('lg-ide-code')!=null){
            editor.setValue(storage.getItem('lg-ide-code'));
        }

        /*
         Firefox: 224
         Opera: 17
         WebKit (Safari/Chrome): 91 (Left Apple) or 93 (Right Apple)
        * */

        var isKeyDown=false;
        var keyDownCode=-2333;

        $(document).keydown(function(e){
            var e=e||window.event;
            if(e.keyCode==83&&(e.ctrlKey||isKeyDown==true)) {    // save file in cookie
                window.localStorage['lg-ide-code']=editor.getValue();
                e.preventDefault();
            }else{
                isKeyDown = true;
                keyDownCode = e.keyCode;
                if (e.keyCode != 224 && e.keyCode != 17 && e.keyCode != 91 && e.keyCode != 93) {
                    isKeyDown = false;
                    keyDownCode = -2333;
                }
            }
        });

        $(document).keyup(function(e){
            var e=e||window.event;
            if (e.keyCode == keyDownCode) {
                keyDownCode=-2333;
                isKeyDown=false;
            }
        });


        //host3v自带的广告...
        $('#ad_3v').remove();
    });
</script>

</body>
</html>